<script lang="ts" setup>
import userData from './components/user-data.vue';
import appointmentSend from './components/appointment-send.vue';
import { ref, computed } from 'vue';

const selectedTime = ref()
const activeTab = ref('fushi')

// 物品类型数据
const ItemData = ref([
  { id: 1, text: '服饰', value: 'fushi', cost: 12 },
  { id: 2, text: '鞋靴', value: 'xiexue', cost: 10 },
  { id: 3, text: '配饰', value: 'peishi', cost: 8 },
  { id: 4, text: '箱包', value: 'xiangbao', cost: 15 }
])

// 计算总价
const totalPrice = computed(() => {
  // 当前选中的物品类型
  const selectedItem = ItemData.value.find(item => item.value === activeTab.value)
  // 返回对应的费用，如果没有找到则返回0
  return selectedItem ? selectedItem.cost : 0
})


// 切换数据
const handDataSwitch = (item: string) => {
  activeTab.value = item
  console.log(item)
}

// 填写收获地址
const goToAddressPage = () => {
  uni.navigateTo({
    url: '/pages-sub/receiving-address',
  })
}

// 立即下单
const handPaymentMethod = () => {
  console.log(activeTab.value, '你好')
  console.log(totalPrice.value)
}
</script>

<template>
  <view class="send">
    <!-- 提示 -->
    <view class="send-hint">
      <uni-icons color="#fac821" custom-prefix="iconfont" type="icon-tishi" size="25"></uni-icons>
      <view class="send-hint-p">订单提交后，将会有快递员上门取件，请保持电话畅通</view>
    </view>
    <!-- 用户信息 -->
    <view class="send-userData">
      <userData />
    </view>
    <!-- 上门时间 -->
    <h1 class="send-h1">预约快递员上门时间</h1>
    <view class="send-mentsend">
      <appointmentSend v-model="selectedTime" />
    </view>
    <!-- 物品类型 -->
    <h1 class="send-h1">物品类型</h1>
    <view class="send-mentsend">
      <view v-for="item in ItemData" :key="item.id" class="send-mentsend-p"
        :class="{ 'active-tab': activeTab === item.value }" @click="handDataSwitch(item.value)">
        {{ item.text }}
      </view>
    </view>
    <!-- 收件人信息 -->
    <h1 class="send-h1">收件人信息</h1>
    <view class="send-recipient">
      <view class="send-recipient-disflex">
        <input class="send-recipient-input" type="text" placeholder="名称">
        <input class="send-recipient-input" type="text" placeholder="手机号">
      </view>
      <view class="send-recipient-input" @click="goToAddressPage">
        <input type="text" disabled placeholder="收货地址">
        <uni-icons custom-prefix="iconfont" type="icon-you" size="25"></uni-icons>
      </view>
    </view>
    <!-- 立即下单 -->
    <view class="send-payment">
      <view class="send-payment-flex">
        <h1 class="send-payment-h1">￥{{ totalPrice || 0 }}</h1>
        <text class="send-payment-text">预计费用</text>
      </view>
      <view>
        <button @click="handPaymentMethod" class="send-payment-button" type="primary">立即下单</button>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.send {
  &-hint {
    /* 设置高z-index确保在最上层 */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(244, 220, 62, 0.1);
    padding: 10rpx;

    &-p {
      font-size: 25rpx;
      color: #f5c925;
    }
  }

  &-userData {
    margin-top: 40rpx;
  }

  &-h1 {
    font-size: 30rpx;
    padding: 40rpx 0;
    font-weight: 700;
  }


  &-mentsend {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: $uni-text-color-inverse ;
    padding: $uni-padding1;
    border-radius: $uni-border-radius;
    box-shadow: $uni-box-shadow;

    &-p {
      padding: 20rpx 35rpx;
      border: 1px solid #f2f2f2;
      border-radius: 20rpx;
    }
  }

  .active-tab {
    color: $uni-text-color-inverse;
    background-color: #4fb7ff;
    border-bottom: 4rpx solid #2a88ee;
  }

  &-recipient {
    &-disflex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40rpx;
    }

    &-input {
      display: flex;
      justify-content: space-between;
      padding: 30rpx 15rpx;
      background-color: $uni-bg-color ;
      border: 1px solid #b5b9bf;
      border-radius: $uni-border-radius;
      margin-bottom: 30rpx;
    }
  }

  &-payment {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: $uni-padding;
    background-color: $uni-text-color-inverse;
    box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.1);
    /* 添加阴影效果 */
    z-index: 100;
    padding: 30rpx;
    display: flex;
    justify-content: space-between;

    &-h1 {
      font-size: 40rpx;
      font-weight: 700;
    }

    &-text {
      font-size: 28rpx;
      color: #acacac;
    }

    &-button {
      font-size: 30rpx;
      border-radius: 50rpx;
      background-color: #4fb7ff;
    }
  }

}
</style>